<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title></title>
    <script src="js/mui.min.js"></script>
    <link href="css/mui.min.css" rel="stylesheet"/>
    <link rel="stylesheet" href="css/all.css">
    <link rel="stylesheet" href="fonts/iconfont.css">

    <script type="text/javascript" charset="utf-8">
      	mui.init();
    </script>
</head>
<body id="home-page">
    <div class="swiperBox">
         <!-- 搜索 -->
         <div class="search">
            <span class="mui-icon mui-icon-search"></span>
            <div class="mui-input-row">
                <input id="suggestId" type="text" class="mui-input-clear search-input" placeholder="带朕去哪儿" >
                <!-- <input  type="text" class=" mui-input-clear" placeholder="带朕去哪儿" > -->
            </div>
            
            <div id="searchResultPanel" style="border:1px solid #C0C0C0;width:200px;height:auto; display:none;"></div>
        </div>
        <!-- 方向 -->
        <div class="direction">
            <span class="iconfont icon-shanxing"></span>
        </div>
        <!-- 信号灯 -->
        <div class="traffic-light">
            <span class="iconfont icon-honglvdeng"></span>
        </div>
        <!-- 地图按钮 放大所小 -->
        <div class="mapZoom">
            <span data-state="add" class="iconfont icon-hao"></span>
            <span data-state="sub" class="iconfont icon-sub"></span>
        </div>
        <div class="mui-content">
        <!-- 内容 -->
           
            <div id="allmap" class="map">
                <!-- map -->
            </div>
        </div>
        <!-- 内容 end-->
    </div>


    <div class="swiperBox2">
        <div class="searchBox">
            <span class="mui-icon mui-icon-search"></span>
            <input id="" class="search-input" type="text" placeholder="请输入地点，联系人，音乐">
        </div>
        
        <div id="slider" class="mui-slider" >
            <div class="mui-slider-group">
                <div class="mui-slider-item">
                    <ul class="mui-table-view mui-grid-view mui-grid-9">
                        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
                                <span class="mui-icon mui-icon-home"></span>
                                <div class="mui-media-body">Home</div></a></li>
                        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
                                <span class="mui-icon mui-icon-email"></span>
                                <div class="mui-media-body">Email</div></a></li>
                        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
                                <span class="mui-icon mui-icon-chatbubble"></span>
                                <div class="mui-media-body">Chat</div></a></li>
                        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
                                <span class="mui-icon mui-icon-location"></span>
                                <div class="mui-media-body">location</div></a></li>
                        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
                                <span class="mui-icon mui-icon-search"></span>
                                <div class="mui-media-body">Search</div></a></li>
                        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
                                <span class="mui-icon mui-icon-phone"></span>
                                <div class="mui-media-body">Phone</div></a></li>
                        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
                                <span class="mui-icon mui-icon-gear"></span>
                                <div class="mui-media-body">Setting</div></a></li>
                        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
                                <span class="mui-icon mui-icon-info"></span>
                                <div class="mui-media-body">about</div></a></li>
                        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
                                <span class="mui-icon mui-icon-more"></span>
                                <div class="mui-media-body">more</div></a></li>
                    </ul>
                </div>
                <div class="mui-slider-item">
                    <ul class="mui-table-view mui-grid-view mui-grid-9">
                        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
                                <span class="mui-icon mui-icon-home"></span>
                                <div class="mui-media-body">Home</div></a></li>
                        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
                                <span class="mui-icon mui-icon-email"></span>
                                <div class="mui-media-body">Email</div></a></li>
                        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
                                <span class="mui-icon mui-icon-chatbubble"></span>
                                <div class="mui-media-body">Chat</div></a></li>
                        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
                                <span class="mui-icon mui-icon-location"></span>
                                <div class="mui-media-body">location</div></a></li>
                        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
                                <span class="mui-icon mui-icon-search"></span>
                                <div class="mui-media-body">Search</div></a></li>
                        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
                                <span class="mui-icon mui-icon-phone"></span>
                                <div class="mui-media-body">Phone</div></a></li>
                        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
                                <span class="mui-icon mui-icon-gear"></span>
                                <div class="mui-media-body">Setting</div></a></li>
                        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
                                <span class="mui-icon mui-icon-info"></span>
                                <div class="mui-media-body">about</div></a></li>
                        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
                                <span class="mui-icon mui-icon-more"></span>
                                <div class="mui-media-body">more</div></a></li>
                    </ul>
                </div>
            </div>
            <div class="mui-slider-indicator">
                <div class="mui-indicator mui-active"></div>
                <div class="mui-indicator"></div>
            </div>
        </div>
       
    </div>
    <!-- 底部 -->
    <nav id="home-footer" class="mui-bar mui-bar-tab ">
        <a class="mui-tab-item mui-active one" data-hrefId="#home-ind">
            <span class="mui-tab-label">1</span>
        </a>
        <a class="mui-tab-item leftTemperature" data-hrefId="#home-schedule">
            <span class="mui-tab-label">24</span>°
        </a>
        <a class="mui-tab-item three" data-hrefId="#home-me">
            <span class="mui-tab-label">3</span>
        </a>
        <a class="mui-tab-item" data-hrefId="#home-me">
            <span class="mui-tab-label">4</span>
        </a>
        <a class="mui-tab-item" data-hrefId="#home-me">
            <span class="mui-tab-label">5</span>
        </a>
        <a class="mui-tab-item" data-hrefId="#home-me">
            <span class="mui-tab-label">6</span>
        </a>
        <a class="mui-tab-item" data-hrefId="#home-me">
            <span class="mui-tab-label">7</span>
        </a>
        <a class="mui-tab-item rightTemperature" data-hrefId="#home-me">
            <span class="mui-tab-label">24</span>°
        </a>
        <a class="mui-tab-item nine" data-hrefId="#home-me">
            <span class="mui-tab-label">9</span>
        </a>
    </nav>
    <!-- app -->
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=Gl4Ejnj0lMI8ukdEXflEiM1GDgGt1z9f"></script>
    <script type="text/javascript" src="http://developer.baidu.com/map/jsdemo/demo/convertor.js"></script> 
    <script src="js/all.js" type="text/javascript"></script>
    <script type="text/javascript">
        window.onload = function() {
            jtApp.indexHtml();
        }
    </script>
</body>
</html>